<template>
	<view class="uni-flex input-box">
		<textarea 
		cursor-spacing="300px" 
		class="textarea" 
		:placeholder="textInputPlaceholder" 
		:fixed="true" 
		:auto-height="true" 
		@input="contentInput" 
		:focus="textInputFocus" 
		:value="textInputValue" 
		@blur="blur" 
		/>
		<icon class="btn-image iconfont icon-image" @tap="inputWithImage" v-if="page == 'topic-comment'"></icon>
		<view class="btn-submit" @tap="directComment" report-submit="true">
			<text form-type="submit">发布</text>
		</view>
  </view>
</template>
<script>
  export default {
		data() {
			return {
				textInputValue: '',
				textInputPlaceholder: this.$props.propsTextInputPlaceholder,
				textInputFocus: this.$props.propsTextInputFocus
			}
		},
    props: {
      propsTextInputPlaceholder: {
        type: String
      },
      page: {
        type: String
      },
      propsTextInputFocus: {
        type: Boolean,
      }
    },
    events: {
      'clear-text-input-value': (...args) => {
        this.textInputValue = '';
      }
    },
		watch: {
			propsTextInputPlaceholder(n, o) {
				this.textInputPlaceholder = n
			},
			propsTextInputFocus(n, o) {
				this.textInputFocus = n
			}
		},
    methods: {
      inputWithImage() {
        console.log('component text-input inputWithImage')
        this.$emit('text-input-tab-image')
      },
      directComment(e) {
        console.log('directComment, component text-input directComment', e)
				if (e.detail.formId) {
					console.log('set formId: ', e.detail.formId)
					this.$store.commit('appendFormId', e.detail.formId)
				}
				let value = this.textInputValue
        this.$emit('direct-comment', value)
				this.textInputValue = ''
      },
      contentInput(e) {
				console.log(e);
        this.textInputValue = e.target.value;
				console.log(`component text-input value: ` + this.textInputValue)
      },
      blur(e) {
				// this.textInputValue = e.target.value;
				let dataset = e.currentTarget.dataset;
				console.log(`blur, component text-input, `, dataset)
				if (this.page == 'comment-detail') {
					console.log(`blur event, page == comment-detail, reset-parent-comment`)
					this.$emit('reset-parent-comment', dataset);
				}
      }
    }
  }
</script>
<style lang="scss">
.input-box {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #eee;
    align-items: center;
    .textarea {
      padding: 4px 16upx;
      flex-grow: 1;
    }
    .btn-image {
      flex-grow: 0;
      margin-right: 10upx;
 
    }
    .btn-submit {
      width: 100upx;
      align-self: stretch;
      display: flex;
      justify-content: center;
      align-items: center;
			background-color: #ddd;
    }
}
</style>
